<template>
  <div class="home-container">
    <!-- 添加背景动画组件 -->
    <BackgroundAnimation />
    
    <!-- 添加用户信息下拉菜单 -->
    <div class="user-dropdown">
      <div class="user-info" @click="toggleDropdown">
        <div class="avatar">
          <el-icon><User /></el-icon>
        </div>
        <span class="username">{{ username }}</span>
        <i class="el-icon-arrow-down" :class="{ 'rotate': isDropdownOpen }"></i>
      </div>
      <div class="dropdown-menu" v-show="isDropdownOpen">
        <div class="dropdown-item" @click="handleCommand('profile')">
          <el-icon><Setting /></el-icon>
          <span>用户信息</span>
        </div>
        <div class="dropdown-item" @click="handleCommand('logout')">
          <el-icon><SwitchButton /></el-icon>
          <span>退出登录</span>
        </div>
      </div>
      <div class="decoration-image"></div>
    </div>
    
    <div class="top-nav">
      <div class="nav-content">
        <div class="nav-items">
          <div v-for="item in menuItems" 
               :key="item.index" 
               :class="['nav-item', { active: activeMenu === item.index }]"
               @click="handleSelect(item.index)">
            {{ item.title }}
            <div class="nav-dot"></div>
              </div>
            </div>
          </div>
        </div>

    <el-container>
      <el-main class="main-full">
        <div class="main-content">
          
          <div v-if="activeMenu === '1'" class="participation-container">
            <div class="participation-header">
              <span>我的参与</span>
            </div>
            <el-tabs v-model="participationTab" class="tabs-full-height">
              <el-tab-pane label="我参与的社团" name="clubs">
                <div class="table-container">
                  <el-table :data="myClubs" style="width: 100%">
                    <el-table-column prop="name" label="社团名称">
                      <template #default="scope">
                        <span>{{ scope.row.name }}</span>
                        <el-tag v-if="scope.row.presidentId === userId" size="small" type="primary" class="ml-2" style="margin-left: 8px">社长</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="description" label="社团简介" show-overflow-tooltip />
                    <el-table-column prop="location" label="活动场地" />
                    <el-table-column prop="contact" label="联系方式" />
                    <el-table-column label="操作" width="250" align="center">
                    <template #default="scope">
                      <div style="display: flex; gap: 12px; justify-content: center;">
                        <button 
                          class="custom-button" 
                          @click="viewClubDetails(scope.row)">
                          查看详情
                        </button>
                        <button 
                          class="custom-button" 
                          @click="showMemberManage(scope.row)">
                          管理
                        </button>
                      </div>
                    </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的社团申请记录" name="applications">
                <div class="filter-container" style="margin: 16px 0;">
                  <el-radio-group v-model="applicationStatus" @change="handleStatusChange">
                    <el-radio-button label="0">申请中</el-radio-button>
                    <el-radio-button label="1">已通过</el-radio-button>
                    <el-radio-button label="2">已拒绝</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="table-container">
                  <el-table :data="myClubApplications" style="width: 100%;">
                    <el-table-column prop="name" label="社团名称" align="center" />
                    <el-table-column label="申请时间" align="center">
                      <template #default="scope">
                        {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center">
                      <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>

              <el-tab-pane label="我参加的活动" name="activities">
                <div class="table-container">
                  <el-table :data="myActivityApplications" style="width: 100%">
                    <el-table-column prop="title" label="活动名称" />
                    <el-table-column prop="clubName" label="举办社团" />
                    <el-table-column label="活动时间">
                      <template #default="scope">
                        {{ dayjs(scope.row.startTime).format('YYYY-MM-DD HH:mm') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                      <template #default="scope">
                        <el-tag :type="getActivityStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="summary" label="活动总结">
                      <template #default="scope">
                        <div class="summary-content" @click="showFullSummary(scope.row)">
                          {{ scope.row.summary ? (scope.row.summary.length > 8 ? scope.row.summary.slice(0, 8) + '...' : scope.row.summary) : '等待社长发布' }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                      <template #default="scope">
                        <div style="display: flex; gap: 12px;">
                          <button class="custom-button" @click="viewActivityDetail(scope.row)">查看详情</button>
                          <button 
                            class="custom-button cancel-button" 
                            @click="cancelActivitySignUp(scope.row)"
                            v-if="canNotSignUp(scope.row)"
                          >取消报名</button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <!-- 活动总结详情对话框 -->
          <div v-if="summaryDialogVisible" class="custom-dialog-overlay" @click="summaryDialogVisible = false">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h3>活动总结详情</h3>
                <button class="close-button" @click="summaryDialogVisible = false">×</button>
              </div>
              <div class="custom-dialog-body">
                <div class="summary-detail">
                  {{ currentSummary }}
                </div>
              </div>
            </div>
          </div>

          <div v-if="activeMenu === '2'" class="explore-container">
            
            <div class="explore-title">
              <h1 class="cn-title">课室之外，社团奇旅启程</h1>
              <h2 class="en-title">Beyond Classrooms: Your Society Adventure Starts Here</h2>
            </div>

            <div class="search-header">
                <div class="search-wrapper">
                  <el-input
                    v-model="searchQuery"
                    placeholder="搜索社团名称"
                    class="search-input"
                    @keyup.enter="handleSearch"
                  >
                    <template #prefix>
                      <el-icon class="search-icon"><Search /></el-icon>
                    </template>
                  </el-input>
                </div>
              </div>  
              
            <div class="clubs-grid" @scroll="handleScroll">
              <div v-for="club in displayedClubs" 
                   :key="club.id" 
                   class="club-card">
                <div class="club-card-content">
                  <div class="club-card-header">
                    <h3 class="club-card-title">{{ club.name }}</h3>
                    <div class="club-card-line">
                      <svg fill="none" height="15" viewBox="0 0 91 15" width="91" xmlns="http://www.w3.org/2000/svg">
                        <path d="m2 10.8247c2.74016-.5756 21-6.13888 28.0866-6.13888 9.4526 0 10.7953 9.85398 21.4134 7.36008 8.4945-1.9951 26.8819-7.36016 37.5-10.0459" 
                              stroke="#ea5a26" 
                              stroke-linecap="round" 
                              stroke-width="6"/>
                      </svg>
                        </div>
                    <div class="club-card-tags">
                      <span class="tag">{{ club.memberCount || 0 }}名成员</span>
                  </div>
                </div>
                  <p class="club-card-description">
                    <span class="label">简介：</span>
                    {{ club.description }}
                  </p>
                  <div class="club-card-actions">
                    <button class="custom-button" @click="viewClubDetails(club)">
                      <i class="el-icon-view"></i>
                      查看详情
                    </button>
                    <button class="custom-button" @click="applyToJoin(club)">
                      <i class="el-icon-plus"></i>
                      申请加入
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 社团详情对话框 -->
          <div v-if="clubDetailVisible" class="custom-dialog-overlay" @click="clubDetailVisible = false">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h3>社团详情</h3>
                <button class="close-button" @click="clubDetailVisible = false">×</button>
              </div>
              <div class="custom-dialog-body" v-if="currentClub">
                <div class="club-info">
                  <h2 class="club-name">{{ currentClub.name }}</h2>
                  <div class="info-section">
                    <div class="info-item">
                      <span class="info-label">社团简介</span>
                      <p class="info-content">{{ currentClub.description }}</p>
                    </div>
                    <div class="info-item">
                      <span class="info-label">社团成员</span>
                      <div class="info-content member-info">
                        <span>数量：{{ currentClub.memberCount }}</span>
                        <button class="custom-button" @click="showMemberList">查看成员名单</button>
                      </div>
                    </div>
                    <div class="info-item">
                      <span class="info-label">活动场地</span>
                      <p class="info-content">{{ currentClub.location }}</p>
                    </div>
                    <div class="info-item">
                      <span class="info-label">联系方式</span>
                      <p class="info-content">{{ currentClub.contact }}</p>
                    </div>
                  </div>

                  <div class="activities-section">
                    <h3>活动预告</h3>
                    <div v-if="!currentClub.upcomingActivities?.length" class="no-activities">
                      暂无活动预告
                    </div>
                    <div v-else class="activities-carousel">
                      <div class="carousel-container">
                        <button 
                          class="carousel-button prev" 
                          @click="prevActivity"
                          :disabled="currentActivityIndex === 0"
                        >
                          <el-icon><ArrowLeft /></el-icon>
                        </button>
                        <div class="carousel-track">
                          <div 
                            v-for="(activity, index) in currentClub.upcomingActivities" 
                            :key="activity.id" 
                            class="activity-card"
                            :class="{ 'active': index === currentActivityIndex }"
                            :style="{ transform: `translateX(${(index - currentActivityIndex) * 100}%)` }"
                          >
                            <h4 class="activity-title">{{ activity.title }}</h4>
                            <p class="activity-description">{{ activity.description }}</p>
                            <div class="activity-details">
                              <div class="detail-item">
                                <i class="el-icon-location"></i>
                                <span>{{ activity.location }}</span>
                              </div>
                              <div class="detail-item">
                                <i class="el-icon-user"></i>
                                <span>限制人数：{{ activity.maxAttendees }}人</span>
                              </div>
                              <div class="detail-item">
                                <i class="el-icon-time"></i>
                                <span>开始：{{ dayjs(activity.startTime).format('MM-DD HH:mm') }}</span>
                              </div>
                              <div class="detail-item">
                                <i class="el-icon-time"></i>
                                <span>结束：{{ dayjs(activity.endTime).format('MM-DD HH:mm') }}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <button 
                          class="carousel-button next" 
                          @click="nextActivity"
                          :disabled="currentActivityIndex === currentClub.upcomingActivities.length - 1"
                        >
                          <el-icon><ArrowRight /></el-icon>
                        </button>
                      </div>
                      <div class="carousel-indicators">
                        <span 
                          v-for="(_, index) in currentClub.upcomingActivities" 
                          :key="index"
                          class="indicator"
                          :class="{ 'active': index === currentActivityIndex }"
                          @click="currentActivityIndex = index"
                        ></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 成员管理对话框 -->
          <div v-if="memberManageVisible" class="custom-dialog-overlay" @click="memberManageVisible = false">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h3>成员管理</h3>
                <button class="close-button" @click="memberManageVisible = false">×</button>
              </div>
              <div class="custom-dialog-body">
                <div class="member-tabs">
                  <div class="tab-buttons">
                    <button 
                      :class="['tab-button', { active: memberActiveTab === 'applications' }]"
                      @click="memberActiveTab = 'applications'"
                    >成员申请</button>
                    <button 
                      :class="['tab-button', { active: memberActiveTab === 'list' }]"
                      @click="memberActiveTab = 'list'"
                    >成员列表</button>
                  </div>
                  
                  <div v-if="memberActiveTab === 'applications'" class="tab-content">
                    <div class="table-container">
                      <table class="custom-table">
                        <thead>
                          <tr>
                            <th>用户名</th>
                            <th>真实姓名</th>
                            <th>申请时间</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="application in memberApplications" :key="application.id">
                            <td>{{ application.username }}</td>
                            <td>{{ application.realName }}</td>
                            <td>{{ new Date(application.applyTime).toLocaleString() }}</td>
                            <td>
                              <div class="action-buttons">
                                <button class="custom-button" @click="handleApprove(application)">通过</button>
                                <button class="custom-button" @click="handleReject(application)">拒绝</button>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>

                  <div v-if="memberActiveTab === 'list'" class="tab-content">
                    <div class="table-container">
                      <table class="custom-table">
                        <thead>
                          <tr>
                            <th>用户名</th>
                            <th>真实姓名</th>
                            <th>加入时间</th>
                            <th>角色</th>
                            <th>操作</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="member in members" :key="member.id">
                            <td>
                              {{ member.username }}
                              <span v-if="member.id === userId" class="member-tag">我</span>
                            </td>
                            <td>{{ member.realName }}</td>
                            <td>{{ dayjs(member.applyTime).format('YYYY-MM-DD HH:mm') }}</td>
                            <td>{{ member.role }}</td>
                            <td>
                              <div class="action-buttons">
                                <button class="custom-button" @click="checkMemberInfo(member)">详细信息</button>
                                <button class="custom-button" @click="removeMember(member.userId, member.role)">移除</button>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 成员详细信息对话框 -->
          <div v-if="memberInfoVisible" class="custom-dialog-overlay" @click="memberInfoVisible = false">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h3>成员详细信息</h3>
                <button class="close-button" @click="memberInfoVisible = false">×</button>
              </div>
              <div class="custom-dialog-body" v-if="selectedMember">
                <div class="member-info-section">
                  <div class="info-row">
                    <div class="info-column">
                      <div class="info-item">
                        <span class="info-label">用户名</span>
                        <span class="info-value">{{ selectedMember.username }}</span>
                      </div>
                      <div class="info-item">
                        <span class="info-label">真实姓名</span>
                        <span class="info-value">{{ selectedMember.realName }}</span>
                      </div>
                    </div>
                    <div class="info-column">
                      <div class="info-item">
                        <span class="info-label">角色</span>
                        <span class="info-value">
                          <span :class="['role-tag', { 'president': selectedMember.role === '社长' }]">
                            {{ selectedMember.role }}
                          </span>
                        </span>
                      </div>
                      <div class="info-item">
                        <span class="info-label">加入时间</span>
                        <span class="info-value">{{ dayjs(selectedMember.createTime).format('YYYY-MM-DD HH:mm') }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 成员列表对话框 -->
          <div v-if="memberListVisible" class="custom-dialog-overlay" @click="memberListVisible = false">
            <div class="custom-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h3>成员名单</h3>
                <button class="close-button" @click="memberListVisible = false">×</button>
              </div>
              <div class="custom-dialog-body">
                <div class="table-container">
                  <table class="custom-table">
                    <thead>
                      <tr>
                        <th>用户名</th>
                        <th>真实姓名</th>
                        <th>角色</th>
                        <th>加入时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="member in clubMembers" :key="member.id">
                        <td>
                          {{ member.username }}
                          <span v-if="member.id === userId" class="member-tag">我</span>
                        </td>
                        <td>{{ member.realName }}</td>
                        <td>
                          <span :class="['role-tag', { 'president': member.role === '社长' }]">
                            {{ member.role }}
                          </span>
                        </td>
                        <td>{{ dayjs(member.createTime).format('YYYY-MM-DD HH:mm') }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div v-if="activeMenu === '3'" class="participation-container">
            <div class="participation-header">
              <span>活动报名</span>
            </div>
            <div class="table-container">
              <el-table :data="activityList" style="width: 100%">
                <el-table-column prop="title" min-width="50" label="活动名称" />
                <el-table-column prop="description" min-width="100" label="活动简介" />
                <el-table-column prop="clubName" min-width="50" label="举办社团"/>
                <el-table-column prop="location" min-width="50" label="活动地点" />
                <el-table-column prop="status" min-width="30" label="状态" align="center">
                  <template #default="scope">
                    <el-tag :type="getActivityStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" min-width="80" align="center">
                  <template #default="scope" >
                    <div style="display: flex; gap: 12px; justify-content: center;">
                      <button 
                        class="custom-button" 
                        @click="viewActivityDetail(scope.row)"
                      >查看详情</button>
                      <button 
                        class="custom-button" 
                        :class="{ 'disabled-button': canNotSignUp(scope.row), 'abled-button': !canNotSignUp(scope.row) }"
                        @click="signUpActivity(scope.row)"
                        :disabled="canNotSignUp(scope.row)"
                        style="width: 54px;"
                      >{{ canNotSignUp(scope.row) ? '已报名' : '报名' }}</button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div v-if="activeMenu === '4'" class="participation-container">
            <div class="participation-header">
              <span>缴费管理</span>
            </div>
            <div class="table-container">
              <el-table :data="paymentList" style="width: 100%">
                <el-table-column prop="clubName" label="社团名称" />
                <el-table-column prop="title" label="活动名称" />
                <el-table-column prop="amount" label="金额" />
                <el-table-column label="支付时间">
                  <template #default="scope">
                    {{ scope.row.paymentTime ? dayjs(scope.row.paymentTime).format('YYYY-MM-DD HH:mm') : '' }}
                    <el-tag v-if="!scope.row.paymentTime" type="info" size="small">还未支付</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态">
                  <template #default="scope">
                    <el-tag :type="getPaymentStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                  <template #default="scope">
                    <button 
                      class="custom-button" 
                      @click="handlePayment(scope.row)"
                      :disabled="scope.row.status !== '待缴费'"
                      :class="{ 'disabled-button': scope.row.status !== '待缴费', 'abled-button': scope.row.status === '待缴费' }"
                    >{{ scope.row.status === '待缴费' ? '缴费' : '已缴费' }}</button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <div v-if="activeMenu === '5'" class="participation-container">
            <div class="participation-header">
              <span>签到管理</span>
            </div>
            <el-tabs v-model="checkInTab" class="tabs-full-height">
              <el-tab-pane label="我要签到" name="toCheckIn">
                <div class="table-container">
                  <el-table :data="notCheckedInList" style="width: 100%">
                    <el-table-column prop="title" label="活动名称" />
                    <el-table-column prop="clubName" label="社团名称" />
                    <el-table-column label="签到截止时间">
                      <template #default="scope">
                        {{ dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="location" label="活动地点" />
                    <el-table-column prop="status" label="状态">
                      <template #default="scope">
                        <el-tag type="warning">待签到</el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                      <template #default="scope">
                        <button 
                          class="custom-button" 
                          @click="handleCheckIn(scope.row)"
                        >签到</button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我已签到" name="checked">
                <div class="table-container">
                  <el-table :data="checkedInList" style="width: 100%">
                    <el-table-column prop="title" label="活动名称" />
                    <el-table-column prop="clubName" label="社团名称" />
                    <el-table-column label="签到时间">
                      <template #default="scope">
                        {{ dayjs(scope.row.endTime).format('YYYY-MM-DD HH:mm') }}
                      </template>
                    </el-table-column>
                    <el-table-column prop="location" label="活动地点" />
                    <el-table-column prop="status" label="状态">
                      <template #default="scope">
                        <el-tag type="success">已签到</el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>

          <!-- 签到方式选择对话框 -->
          <el-dialog
                v-model="checkInDialogVisible"
                title="选择签到方式"
                width="400px"
                :append-to-body="true"
              >
                <el-radio-group v-model="checkInType" class="check-in-options">
                  <el-radio label="1">线上签到</el-radio>
                  <el-radio label="2">二维码签到</el-radio>
                  <el-radio label="3">线上补签</el-radio>
                  <el-radio label="4">其他</el-radio>
                </el-radio-group>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="checkInDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmCheckIn(checkInType)">确认</el-button>
                  </span>
                </template>
              </el-dialog>

          <div v-if="activeMenu === '6'" >
            <club-management @activity-updated="loadActivityList" />
          </div>

          <!-- 活动详情对话框 -->
          <div v-if="activityDetailVisible" class="custom-dialog-overlay" @click="activityDetailVisible = false">
            <div class="custom-dialog activity-detail-dialog" @click.stop>
              <div class="custom-dialog-header">
                <h3>活动详情</h3>
                <button class="close-button" @click="activityDetailVisible = false">×</button>
              </div>
              <div class="custom-dialog-body" v-if="currentActivity">
                <div class="activity-detail-section">
                  <div class="info-grid">
                    <div class="info-item">
                      <span class="info-label">活动名称</span>
                      <span class="info-value">{{ currentActivity.title }}</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">举办社团</span>
                      <span class="info-value">{{ currentActivity.clubName }}</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">活动地点</span>
                      <span class="info-value">{{ currentActivity.location }}</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">限制人数</span>
                      <span class="info-value">{{ currentActivity.maxAttendees }}人</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">开始时间</span>
                      <span class="info-value">{{ dayjs(currentActivity.startTime).format('YYYY-MM-DD HH:mm') }}</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">结束时间</span>
                      <span class="info-value">{{ dayjs(currentActivity.endTime).format('YYYY-MM-DD HH:mm') }}</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">当前状态</span>
                      <span class="info-value">
                        <span :class="['status-tag', getActivityStatusType(currentActivity.status)]">
                          {{ currentActivity.status }}
                        </span>
                      </span>
                    </div>
                  </div>
                  <div class="description-section">
                    <span class="info-label">活动描述</span>
                    <span class="info-value description-text">{{ currentActivity.description }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 支付对话框 -->
          <el-dialog
            v-model="paymentDialogVisible"
            title="支付确认"
            width="400px"
            center
          >
            <div class="payment-dialog-content" style="text-align: center;">
              <h3>支付金额：¥{{ currentPayment?.amount || 0 }}</h3>
              <div class="qr-code" style="margin: 20px 0; display: flex; justify-content: center;">
                <img src="../assets/icons/qr-code.svg" alt="支付二维码" style="width: 200px; height: 200px; background: transparent;" />
              </div>
              <p style="color: #666; margin-bottom: 20px;">请使用手机扫描二维码完成支付</p>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="paymentDialogVisible = false">不交了</el-button>
                <el-button type="primary" @click="confirmPayment">我已完成支付</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount, reactive, provide } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, CirclePlus, Calendar, Wallet, Location, Avatar, CircleCheck, Delete, Setting, SwitchButton, User, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import request from '../utils/request'
import ClubManagement from './ClubManagement.vue'
import dayjs from 'dayjs'
import { el } from 'element-plus/es/locales.mjs'
import BackgroundAnimation from '../components/BackgroundAnimation.vue'

// 顶栏打字机效果变量
const greetingsMessages = [
  '欢迎来到社团管理系统，今天有什么计划？',
  '探索新社团，发现新乐趣！',
  '有心动的活动吗？快去报名参加吧！',
  '社团活动缺席？记得及时请假哦～',
  '参与社团活动，丰富校园生活～',
  '做好社团活动签到，不要错过精彩活动！',
  '社团管理系统，让校园生活更精彩！',
  '社团的朋友们都在等你呢！'
]
const currentGreeting = ref('')
const currentGreetingIndex = ref(0)
const isTyping = ref(true)
let typingTimer = null

// 活动总结对话框
const summaryDialogVisible = ref(false)
const currentSummary = ref('')

const showFullSummary = (row) => {
  if (row.summary) {
    currentSummary.value = row.summary
    summaryDialogVisible.value = true
  }
}

const typeGreeting = () => {
  const currentMessage = greetingsMessages[currentGreetingIndex.value]
  const targetLength = isTyping.value ? currentMessage.length : 0
  
  if (isTyping.value && currentGreeting.value.length < targetLength) {
    // 正在输入中
    currentGreeting.value = currentMessage.substring(0, currentGreeting.value.length + 1)
    typingTimer = setTimeout(typeGreeting, 50)
  } else if (!isTyping.value && currentGreeting.value.length > 0) {
    // 正在删除中
    currentGreeting.value = currentGreeting.value.substring(0, currentGreeting.value.length - 1)
    typingTimer = setTimeout(typeGreeting, 30)
  } else if (isTyping.value) {
    // 输入完成，等待一会后开始删除
    isTyping.value = false
    typingTimer = setTimeout(typeGreeting, 2000)
  } else {
    // 删除完成，切换到下一条提示
    currentGreetingIndex.value = (currentGreetingIndex.value + 1) % greetingsMessages.length
    isTyping.value = true
    typingTimer = setTimeout(typeGreeting, 500)
  }
}

const router = useRouter()
const username = ref(localStorage.getItem('username') || '--')
const userId = ref(parseInt(localStorage.getItem('userId') || '--'))
const activeMenu = ref('2')
const activeTab = ref('search')
const searchQuery = ref('')
const clubList = ref([])
const myClubApplications = ref([])
const myActivityApplications = ref([])
const activityList = ref([])
const paymentList = ref([])
const checkInList = ref([])
const myClubs = ref([])
const applicationStatus = ref('0')
const participationTab = ref('clubs')
const paymentDialogVisible = ref(false)
const currentPayment = ref(null)

// 成员管理相关
const memberManageVisible = ref(false)
const memberActiveTab = ref('applications')
const memberApplications = ref([])
const members = ref([])
const selectedClub = ref(null)
const selectedMember = ref(null)
const memberInfoVisible = ref(false)

// 侧边栏状态
const isSidebarOpen = ref(false)

// 分页相关数据 - 社团探索
const clubCurrentPage = ref(1)
const clubPageSize = ref(50)

// 分页相关数据 - 活动报名
const activityCurrentPage = ref(1)
const activityPageSize = ref(50)

// 分页相关数据 - 缴费管理
const paymentCurrentPage = ref(1)
const paymentPageSize = ref(50)

// 分页处理方法 - 社团探索
const handleClubSizeChange = (val) => {
  clubPageSize.value = val
  clubCurrentPage.value = 1
}

const handleClubCurrentChange = (val) => {
  clubCurrentPage.value = val
}

// 分页处理方法 - 活动报名
const handleActivitySizeChange = (val) => {
  activityPageSize.value = val
  activityCurrentPage.value = 1
}

const handleActivityCurrentChange = (val) => {
  activityCurrentPage.value = val
}

// 分页处理方法 - 缴费管理
const handlePaymentSizeChange = (val) => {
  paymentPageSize.value = val
  paymentCurrentPage.value = 1
}

const handlePaymentCurrentChange = (val) => {
  paymentCurrentPage.value = val
}

const checkRole = async (clubId) => {
  if(clubId==null){
    return false
  }
  const res = await request.get(`/club-member/pending/${clubId}`)
  if (res.message=='无权移除社团成员'){
    return true
  }
  return false
} 

// 成员管理方法
const showMemberManage = async (club) => {
  if (await checkRole(club.id)) {
    ElMessage.info('您缺少管理权限，请探索其他地方吧^3^')
    return
  }
  if(club.presidentId==userId.value){
    ElMessage.success({message: '您是社长，可以移步"我是社长"中获取更多管理功能支持', duration: 3000})
  }
  selectedClub.value = club
  memberManageVisible.value = true
  await loadMembers()
}

const confirmCheckIn = async (checkInType) => {
  try {
    checkFrom.activityId = currentActivity.value.activityId
    checkFrom.userId = userId.value
    checkFrom.method = checkInType === '1' ? '线上签到' : checkInType==='2'?'二维码签到':checkInType==='3'?'线上补签':"其他"
    const res = await request.post(`/activity/checkin`, checkFrom)
    if (!res.success) {
      ElMessage.error(res.message || '签到失败')
      return
    }
    ElMessage.success('签到成功')
    await loadNotCheckedInList()
    await loadCheckedInList()
    checkInDialogVisible.value = false
  } catch (error) {
    ElMessage.error(error.message || '签到失败')
  }
}

const loadMembers = async () => {
  try {
    // 加载待审核的成员申请
    const pendingRes = await request.get(`/club-member/pending/${selectedClub.value.id}`)
    if(!pendingRes.success){
      ElMessage.error('加载待审核的成员申请失败:'+(pendingRes.message||pendingRes.data))
    }
    memberApplications.value = pendingRes.data

    // 加载成员列表
    const membersRes = await request.get(`/club-member/club/${selectedClub.value.id}`)
    if(!membersRes.success){
      ElMessage.error('加载成员列表失败:'+(membersRes.message||membersRes.data))
    }
    members.value = membersRes.data.map(member => ({
      ...member,
      role: member.role === 2 ? '社长' : member.role === 1 ? '副社长' : '普通成员'
    }))
  } catch (error) {
    ElMessage.error('加载成员管理数据失败：' + error.message)
  }
}

const handleApprove = async (application) => {
  try {
    const res = await request.put(`/club-member/approve/${application.clubMemberId}`)
    if (!res.success) {
      ElMessage.error(res.data||res.message + "currentUser:"+userId.value)
      return
    }
    ElMessage.success('已通过申请')
    loadMembers()
  } catch (error) {
    ElMessage.error('审核失败：' + (error.response?.data?.message || error.message || '网络请求失败'))
  }
}

const handleReject = async (application) => {
  try {
    const res = await request.put(`/club-member/reject/${application.clubMemberId}?processedBy=${userId.value}`)
    if (!res.success) {
      ElMessage.error(res.data||res.message + "currentUser:"+userId.value)
      return
    }
    ElMessage.success('已拒绝申请')
    loadMembers()
  } catch (error) {
    ElMessage.error('审核失败：' + (error.response?.data?.message || error.message || '网络请求失败'))
  }
}

const checkMemberInfo = (member) => {
  selectedMember.value = member
  memberInfoVisible.value = true
}

const removeMember = async (memberId, role) => {
  if (memberId === userId.value) {
    ElMessage.warning('无法对自己执行当前操作')
    return
  }
  if (memberId === selectedClub.value.presidentId) {
    ElMessage.warning('无法对社长执行此操作')
    return
  }
  if (userId.value!=selectedClub.value.presidentId && role === '副社长'){
    ElMessage.warning('您无社长权限对其余副社长执行当前操作')
  }
  try {
    const result = await ElMessageBox.confirm(
      '确定要移除该成员吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    if (result === 'confirm') {
      const response = await request({
        url: `/club-member/remove?userId=${memberId}&clubId=${selectedClub.value.id}`,
        method: 'delete'
      })
      if (response.success) {
        ElMessage.success('成员移除成功')
        loadMembers()
      } else {
        ElMessage.error('移除成员失败：' + response.message)
      }
    }
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.response?.data?.message || '操作失败')
    }
  }
}

const menuItems = ref([
  { index: '1', title: '我的参与', icon: CirclePlus },
  { index: '2', title: '社团探索', icon: Search },
  { index: '3', title: '活动报名', icon: Calendar },
  { index: '4', title: '缴费管理', icon: Wallet },
  { index: '5', title: '签到管理', icon: Location },
  { index: '6', title: '我是社长', icon: Avatar }
])

// 侧边栏状态变化的处理函数
const handleSidebarToggle = (isOpen) => {
  isSidebarOpen.value = isOpen
}

// 提供侧边栏状态给子组件
provide('isSidebarOpen', isSidebarOpen)

const loadMyClubs = async () => {
  try {
    const res = await request({
      url: '/club-member/clubs?status=1',
      method: 'get'
    })
    if (res.success) {
      myClubs.value = res.data
    } else {
      ElMessage.error(res.message || res.data || '获取我的社团列表失败')
    }
  } catch (error) {
    ElMessage.error('获取我的社团列表失败')
  }
}

const checkUserIdentity = async () => {
  try {
    const res = await request({
      url: '/auth/info',
      method: 'get'
    })
    if (res.success) {
      const localUserId = localStorage.getItem('userId')
      if (localUserId != res.data.id) {
        ElMessage.warning('用户信息已过期，请重新登录...')
        setTimeout(() => {
          router.push('/login')
        }, 2500)
      }
      return true
    } else {
      throw new Error('验证用户身份失败')
    }
  } catch (error) {
    ElMessage.error(error.message+'验证用户身份失败, 请重新登录...')
    setTimeout(() => {
      router.push('/login')
    }, 2500)
    return false
  }
}

// 实时数据检查与更新部分
const refreshData = async () => {
  checkUserIdentity().then(vaild => {
      if(vaild){
        loadClubList(null)
        loadMyClubs()
        loadMyClubApplications(applicationStatus.value)
        loadActivityList()
        loadMyActivityApplications()
        loadPaymentList()
        loadNotCheckedInList()
        loadCheckedInList()
      }
    })
}

const handleVisibilityChange = () => {
  if (document.visibilityState === 'visible') {
    // 页面回到可见状态，刷新数据
    refreshData()
  }
}

let intervalId = null

onMounted(() => {
  refreshData()
  // 启动打字机效果
  typeGreeting()
  intervalId = setInterval(refreshData, 2500 * 20) // 每二十坤秒检查一次
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

onBeforeUnmount(() => {
  clearInterval(intervalId) // 离开页面时清除定时器，避免内存泄漏
  // 清除打字机效果定时器
  if (typingTimer) {
    clearTimeout(typingTimer)
  }
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})

const handleCommand = (command) => {
  if (command === 'profile') {
    router.push('/profile')
  } else if (command === 'logout') {
    handleLogout()
  }
}

const handleLogout = async () => {
  try {
    const res = await request({
      url: '/auth/logout',
      method: 'post'
    })
    
    if (res.success) {
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      ElMessage.success('退出成功')
      router.push('/login')
    }
  } catch (error) {
    ElMessage.error(error.message || '退出失败')
  }
}

const handleSelect = (index) => {
  activeMenu.value = index
}

const viewActivityDetail = (activity) => {
  currentActivity.value = activity
  activityDetailVisible.value = true
}

const handleSearch = () => {
  loadClubList(searchQuery.value)
}

const loadClubList = async (searchvalue) => {
  try {
    const res = await request({
      url: `club/list?name=${searchQuery.value}&pageNum=1&pageSize=1000`, //确保一次性获取所有社团
      method: 'get'
    })
    if (res.success) {
      // 获取每个社团的成员数量
      const clubsWithMembers = await Promise.all(
        res.data.map(async (club) => {
          const memberRes = await request({
            url: `/club-member/club/${club.id}`,
            method: 'get'
          })
          return {
            ...club,
            memberCount: memberRes.success ? memberRes.data.length : 0
          }
        })
      )
      clubList.value = clubsWithMembers
    } else {
      ElMessage.error(res.message || '获取社团列表失败')
    }
  } catch (error) {
    ElMessage.error('获取社团列表失败')
  }
}

const clubDetailVisible = ref(false)
const currentClub = ref(null)
const currentClubId = ref(null)
const memberListVisible = ref(false)
const clubMembers = ref([])

const viewClubDetail = async (club) => {
  if (!club || !club.id) {
    ElMessage.error('无效的社团信息')
    return
  }
  currentClubId.value = club.id
  try {
    const [clubRes, activitiesRes] = await Promise.all([
      request({
        url: `/club/${club.id}`,
        method: 'get'
      }),
      request({
        url: `/activity/list`,
        method: 'post',
        data: {
          clubId: club.id
        }
      })
    ])
    
    if (clubRes.success) {
      currentClub.value = clubRes.data
      currentClub.value.memberCount = clubRes.data.members?.length || 0
      
      // 处理活动预告
      if (activitiesRes.success) {
        currentClub.value.upcomingActivities = activitiesRes.data
          .filter(activity => (activity.status === 0 || activity.status === 1) && dayjs(activity.endTime).isAfter(dayjs()))
          .sort((a, b) => dayjs(a.startTime).valueOf() - dayjs(b.startTime).valueOf())
      } else {
        currentClub.value.upcomingActivities = []
      }
      clubDetailVisible.value = true
    } else {
      ElMessage.error(clubRes.data || clubRes.message || '获取社团详情失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '获取社团详情失败')
    currentClub.value = null
  }
}

const showMemberList = async () => {
  try {
    const res = await request({
      url: `/club-member/club/${currentClubId.value}`,
      method: 'get'
    })
    if(res.success){
      memberListVisible.value = true
      clubMembers.value = res.data.map(member => ({
        ...member,
        role: member.role === 2? '社长' : member.role === 1? '副社长' : '普通成员'
      }))
    }
    else{
      ElMessage.error(res.data||res.message||'获取成员列表失败')
    }
  } catch (error) {
    ElMessage.error('获取成员列表失败')
  }
}

const applyClub = async (club) => {
  try {
    const res = await request({
      url: `/club/apply?clubId=${club.id}`,
      method: 'post',
    })
    if (res.success){
      ElMessage.success('申请提交成功')
      loadMyClubApplications(0)
    }
    else{
      ElMessage.error(res.data||res.message||'申请失败')
    }
  } catch (error) {
    ElMessage.error('申请失败：'+error.message)
  }
}

const loadMyClubApplications = async (status) => {
  try {
    const res = await request({
      url: '/club-member/clubs',
      method: 'get',
      params: { status }
    })
    if (res.success) {
      myClubApplications.value = res.data
        .filter(item => parseInt(item.presidentId) !== parseInt(userId.value))
        .map(item => ({
          ...item,
          status: item.status === 0 ? '申请中' : item.status === 1 ? '已通过' : '已拒绝'
        }))
    } else {
      ElMessage.error(res.message || '获取申请记录失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '获取申请记录失败')
  }
}

const loadActivityList = async () => {
  try {
    const res = await request({
      url: `/activity/list?pageNum=${activityCurrentPage.value}&pageSize=${activityPageSize.value}`,
      method: 'post',
      data:{}
    })
    if (res.success) {
      activityList.value = res.data.map(item => ({
        ...item,
        status: item.status === 0? '未开始' : item.status === 1? '进行中' : '已结束'
      }))
      await loadMyActivityApplications()
    } else {
      ElMessage.error(res.message || '获取活动列表失败')
    }
  } catch (error) {
    ElMessage.error('获取活动列表失败：' + error.message)
  }
}

const loadPaymentList = async () => {
  try {
    const res = await request({
      url: '/payment/user',
      method: 'get',
      params: {
        pageNum: 1, 
        pageSize: 1000
      }
    })
    if (res.success) {
      paymentList.value = res.data
        .map(payment => ({
          ...payment,
          status: payment.status === 0 ? '待缴费' : payment.status === 1 ? '已缴费' : '已取消'
        }))
        .sort((a, b) => {
          // 待缴费排在最前面
          if (a.status === '待缴费' && b.status !== '待缴费') return -1;
          if (a.status !== '待缴费' && b.status === '待缴费') return 1;
          // 已缴费按时间降序排序
          if (a.status === '已缴费' && b.status === '已缴费') {
            return new Date(b.paymentTime) - new Date(a.paymentTime);
          }
          return 0;
        })
    } else {
      ElMessage.error(res.message || res.data || '获取缴费列表失败')
    }
  } catch (error) {
    ElMessage.error('获取缴费列表失败：' + error.message)
  }
}

// 签到管理相关
const checkInTab = ref('toCheckIn')
const notCheckedInList = ref([])
const checkedInList = ref([])

// 监听签到列表变化
watch([notCheckedInList, checkedInList], ([newNotChecked, newChecked], [oldNotChecked, oldChecked]) => {
  try {
    // 数据发生变化时更新显示
    if (JSON.stringify(newNotChecked) !== JSON.stringify(oldNotChecked)) {
      console.log('待签到列表已更新')
    }
    if (JSON.stringify(newChecked) !== JSON.stringify(oldChecked)) {
      console.log('已签到列表已更新')
    }
  } catch (error) {
    console.error('签到列表更新失败:', error)
  }
})
// 获取待签到活动列表
const loadNotCheckedInList = async () => {
  try {
    const res = await request.get('/activity/not-checkin-activity')
    if (!res.success) {
      ElMessage.error(res.message || '获取待签到活动列表失败')
      return
    }
    notCheckedInList.value = res.data.filter(
      (activity) =>
        activity.status === 1
    ) || []
  } catch (error) {
    ElMessage.error(error.message || '获取待签到活动列表失败')
  }
}

// 获取已签到活动列表
const loadCheckedInList = async () => {
  try {
    const res = await request.get('/activity/checkin-activity')
    if (!res.success) {
      ElMessage.error(res.message || '获取已签到活动列表失败')
      return
    }
    checkedInList.value = res.data || []
  } catch (error) {
    ElMessage.error(error.message || '获取已签到活动列表失败')
  }
}
const checkFrom = reactive({
  "userId": 0,
  "activityId": 0,
  "method": "用脚点的签到"
})

const handleStatusChange = (value) => {
  loadMyClubApplications(value)
}

const cancelApplication = async (application) => {
  try {
    const res = await request({
      url: `/club-applications/${application.id}/cancel`,
      method: 'post'
    })
    ElMessage.success('取消申请成功')
    await loadMyClubApplications(0)
    await loadCheckedInList()
    await loadNotCheckedInList()
  } catch (error) {
    ElMessage.error(error.message || '取消申请失败')
  }
}

const signUpActivity = async (activity) => {
  try {
    const res = await request({
      url: `/activity/register`,
      method: 'post',
      data:{
        "userId": userId.value,
        "activityId": activity.activityId,
        "status": 0
      }
    })
    if (res.success) {
      ElMessage.success('报名成功')
      // 重新加载活动列表以更新状态
      await loadActivityList()
      await loadMyActivityApplications()
      await loadCheckedInList()
      await loadNotCheckedInList()
    } else {
      ElMessage.error(res.message || res.data|| '报名失败')
    }
  } catch (error) {
    ElMessage.error(error.message || '报名失败')
  }
}

const handlePayment = (payment) => {
  currentPayment.value = payment
  paymentDialogVisible.value = true
}

const confirmPayment = async () => {
  try {
    const res = await request({
      url: '/payment/make',
      method: 'post',
      data: {
        id: currentPayment.value.paymentId,
        status: 1
      }
    })
    
    if (res.success) {
      ElMessage.success('支付成功')
      paymentDialogVisible.value = false
      loadPaymentList()
    } else {
      ElMessage.error(res.message || res.data || '支付失败')
    }
  } catch (error) {
    ElMessage.error('支付失败：' + error.message)
  }
}

const getStatusType = (status) => {
  const statusMap = {
    '申请中': 'warning',
    '已通过': 'success',
    '已拒绝': 'danger'
  }
  return statusMap[status] || 'info'
}

// 获取活动状态对应的类型
const getActivityStatusType = (status) => {
  const statusMap = {
    '未开始': 'info',
    '进行中': 'success',
    '已结束': 'warning'
  }
  return statusMap[status] || 'info'
}

const getPaymentStatusType = (status) => {
  const statusMap = {
    '待缴费': 'warning',
    '已缴费': 'success',
    '已过期': 'danger'
  }
  return statusMap[status] || 'info'
}

const getCheckInStatusType = (status) => {
  const statusMap = {
    '待签到': 'warning',
    '已签到': 'success',
    '已过期': 'danger'
  }
  return statusMap[status] || 'info'
}

// 加载我的活动报名列表
const loadMyActivityApplications = async () => {
  try {
    const res = await request.post('/activity/my-registrations')
    if(!res.success){
      ElMessage.error(res.data||res.message||'获取活动报名列表失败')
      return
    }
    myActivityApplications.value = res.data.map(item => ({
        ...item,
        status: item.status == 0? '未开始' : item.status == 1? '进行中' : '已结束'
      })) || []
  } catch (error) {
    ElMessage.error(error.message || '获取活动报名列表失败')
  }
}

const canNotSignUp = (activity) => {
  const hadregistered = myActivityApplications.value.some(item => item.activityId === activity.activityId)
  return activity.status === '已结束' || hadregistered
}

const cancelActivitySignUp = async (activity) => {
  try {
    const res = await request.post(`/activity/cancel-registration/${activity.activityId}`)
    if(!res.success){
      ElMessage.error(res.data||res.message||'取消报名失败')
      return
    }
    ElMessage.success('取消报名成功')
    await loadActivityList()
    await loadMyActivityApplications()
  } catch (error) {
    ElMessage.error(error.message || '取消报名失败')
  }
}

// 活动详情相关
const checkInDialogVisible = ref(false)
const checkInType = ref('1')
// 活动详情相关
const activityDetailVisible = ref(false)
const currentActivity = ref(null)

const handleCheckIn = (activity) => {
  currentActivity.value = activity
  checkInDialogVisible.value = true
}

const viewClubDetails = (club) => {
  viewClubDetail(club)
}

const applyToJoin = (club) => {
  applyClub(club)
}

// 分页相关数据
const pageSize = ref(12)
// const currentPage = ref(1)
const displayedClubs = ref([])

// 更新显示的逻辑
const updateDisplayedClubs = () => {
  displayedClubs.value = clubList.value
}

// 监听滚动加载更多
const handleScroll = (e) => {
  // 移除滚动加载逻辑
}

// 监听搜索和列表变化
watch([searchQuery, clubList], () => {
  updateDisplayedClubs()
})

// 初始化显示
onMounted(() => {
  updateDisplayedClubs()
})

const isDropdownOpen = ref(false)

const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value
}

// 点击其他地方关闭下拉菜单
const handleClickOutside = (event) => {
  const dropdown = document.querySelector('.user-dropdown')
  if (dropdown && !dropdown.contains(event.target)) {
    isDropdownOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})

const currentActivityIndex = ref(0)

const prevActivity = () => {
  if (currentActivityIndex.value > 0) {
    currentActivityIndex.value--
  }
}

const nextActivity = () => {
  if (currentActivityIndex.value < currentClub.value.upcomingActivities.length - 1) {
    currentActivityIndex.value++
  }
}

// 监听currentClub变化时重置索引
watch(() => currentClub.value, () => {
  currentActivityIndex.value = 0
})

</script>

<style scoped>
@import '../assets/styles/button.scss';

/* 添加字体引入 */
@font-face {
  font-family: 'ShangShouBoHan';
  src: url('../assets/fonts/上首博瀚体.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'REEJI-HaoHengGB-Heavy';
  src: url('../assets/fonts/REEJI-HaoHengGB-Heavy.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.home-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

.top-nav {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
    position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px;
}

.el-container {
  position: relative;
  z-index: 2;
}

.main-full {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

.main-content {
  position: relative;
  z-index: 2;
  max-width: 1300px;
  margin: 38px auto;
  padding: 0 20px;
  width: 90%;
  /* min-height: calc(100vh - 94px); 确保最小高度足够 */
  display: flex;
  flex-direction: column;
}

/* 调整卡片样式，增加玻璃态效果 */
.el-card {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
  border: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
}

/* 调整表格样式 */
.el-table {
  background: transparent !important;
}

.el-table th {
  background: rgba(255, 255, 255, 0.8) !important;
}

.el-table tr {
  background: transparent !important;
}

.el-table td {
  background: transparent !important;
}

/* 调整导航栏样式 */
.nav-content {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.card-full-height {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
}

/* 顶栏样式 */
.top-navbar {
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.top-navbar:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.greeting-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-greeting {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.greeting-text {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.greeting-message-container {
  display: flex;
  align-items: center;
  height: 22px;
}

.greeting-message {
  font-size: 14px;
  color: #606266;
}

.cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: bold;
  color: #606266;
}

.cursor.blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.el-container {
  height: 100%;
  width: 100%;
  position: relative;
}

.el-main {
  background-color: #f5f7fa;
  padding: 24px;
  height: 100vh;
  transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 60px;
  width: calc(100% - 60px);
}

.main-expanded {
  margin-left: 60px;
  width: calc(100% - 60px);
}

.main-collapsed {
  margin-left: 300px;
  width: calc(100% - 300px);
}

@media (max-width: 768px) {
  .el-main {
    margin-left: 0;
    width: 100%;
    transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  
  .main-expanded {
    margin-left: 0;
    width: 100%;
  }
  
  .main-collapsed {
    margin-left: 300px;
    width: calc(100% - 300px);
  }
}

.main-content {
  padding: 0;
  width: 100%;
  /* height: calc(100vh - 200px); */
  min-width: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  height: 60px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.card-header span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
  line-height: 1;
}

.card-header span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #409EFF;
  border-radius: 2px;
}

.search-wrapper {
  position: relative;
  width: 300px;
}

.search-input {
  /* width: 300px; */
}

.search-input :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
  border-radius: 20px;
  padding: 4px 16px;
  box-shadow: none;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  background-color: #e4e7ed;
}

.search-input :deep(.el-input__wrapper.is-focus) {
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #409EFF inset;
}

.search-input :deep(.el-input__inner) {
  color: #606266;
  font-size: 14px;
  height: 28px;
  line-height: 28px;
}

.search-icon {
  color: #909399;
  font-size: 14px;
  margin-right: 8px;
}

.el-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  overflow: hidden;
}

.el-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* 表格相关样式 */
.el-table {
  width: 100% !important;
  overflow-x: auto;
  margin-top: 16px;
  border-radius: 4px;
  overflow: hidden;
  --el-table-border-color: #ebeef5;
  --el-table-header-background-color: #f5f7fa;
  --el-table-row-hover-background-color: #f5f7fa;
}

.el-table th {
  background-color: var(--el-table-header-background-color);
  font-weight: 600;
  color: #606266;
  padding: 12px 0;
}

.el-table td {
  padding: 12px 0;
}

/* 分页器样式 */
.pagination-container {
  margin-top: 20px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 4px;
}

/* 标签样式 */
.el-tag {
  border-radius: 4px;
  padding: 0 8px;
  height: 24px;
  line-height: 22px;
}

.card-full-height {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-full-height :deep(.el-card__body) {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tabs-full-height {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20px;
}

.tabs-full-height :deep(.el-tabs__header) {
  margin-bottom: 24px;
  order: -1;
  display: flex;
  justify-content: center;
}

.tabs-full-height :deep(.el-tabs__nav-wrap) {
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.tabs-full-height :deep(.el-tabs__nav) {
  display: flex;
  justify-content: center;
  border: none !important;
}

.tabs-full-height :deep(.el-tabs__item) {
  position: relative;
  padding: 8px 16px !important;
  height: auto !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #1B365D !important;
  background: none !important;
  border: none !important;
  margin: 0 12px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
  font-weight: 500;

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 8px;
    opacity: 0;
    background-color: #EA5A26;
    inset: 60% -4px 0 -4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:hover {
    color: #EA5A26 !important;
    transform: translateY(-1px);

    &::after {
      opacity: 0.2;
      inset: 40% -4px 0 -4px;
    }
  }

  &.is-active {
    color: #EA5A26 !important;
    font-weight: 600 !important;

    &::after {
      opacity: 0.3;
      inset: 0 -4px 0 -4px;
    }
  }
}

.tabs-full-height :deep(.el-tabs__active-bar) {
  display: none !important;
}

.tabs-full-height :deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
  height: calc(100% - 40px);
  position: relative;
}

.tabs-full-height :deep(.el-tab-pane) {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  padding: 0 20px;
}

.table-container .el-table {
  flex: 1;
  overflow: auto;
  margin: 0;
}

.el-tabs :deep(.el-tabs__nav-wrap) {
  position: relative;
  top: 0;
  z-index: 1;
}

.el-tabs :deep(.el-tabs__header) {
  margin-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.el-tabs :deep(.el-tabs__nav) {
  white-space: nowrap;
  position: relative;
  transition: transform .3s;
}

.wave {
  display: inline-block;
  animation: wave-animation 2.5s infinite;
  transform-origin: 70% 70%;
}

@keyframes wave-animation {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
  50% { transform: rotate(10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.toggle-sidebar-btn {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.1);
}

.toggle-sidebar-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.toggle-sidebar-btn:active {
  transform: translateY(0);
}

/* 对话框样式优化 */
:deep(.el-dialog) {
  --el-dialog-margin-top: 15vh !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  margin: 15vh auto !important;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

:deep(.el-dialog__body) {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

:deep(.el-dialog__header) {
  padding: 20px 24px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
  background: #f8f9fa;
  border-radius: 16px 16px 0 0;
}

:deep(.el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

:deep(.el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid #ebeef5;
  background: #f8f9fa;
}

/* 添加遮罩层样式 */
:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 自定义对话框样式 */
.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.custom-dialog {
  background: white;
  border-radius: 16px;
  width: 800px;
  max-width: 90vw;
  max-height: 80vh;
  min-height: 400px; /* 添加最小高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: dialogFadeIn 0.3s ease;
  border: 2px solid #0a4472;
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-dialog-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-radius: 16px 16px 0 0;
}

.custom-dialog-header h3 {
  margin: 0;
  font-size: 20px;
  color: #303133;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #303133;
}

.custom-dialog-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px; /* 添加最小高度 */
  display: flex;
  flex-direction: column;
}

.club-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 300px;
}

.club-name {
  margin: 0;
  font-size: 24px;
  color: #303133;
  text-align: center;
  position: relative;
  padding-bottom: 12px;
}

.club-name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #409EFF;
  border-radius: 2px;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f8f9fa;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  flex: 1;
  min-height: 200px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  font-weight: 600;
  color: #606266;
  font-size: 14px;
}

.info-content {
  margin: 0;
  color: #303133;
  font-size: 14px;
  line-height: 1.6;
}

.member-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.view-members-btn {
  background: none;
  border: none;
  color: #409EFF;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.view-members-btn:hover {
  background: rgba(64, 158, 255, 0.1);
}

.activities-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 300px;
}

.activities-section h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  text-align: center;
  position: relative;
  padding-bottom: 8px;
}

.activities-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: #409EFF;
  border-radius: 2px;
}

.no-activities {
  text-align: center;
  color: #909399;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 8px;
}

.activities-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
}

.carousel-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.carousel-track {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.activity-card {
  position: absolute;
  width: 90%;
  height: 80%;
  background: rgb(255, 255, 255);
  border: 3px solid #0a4472;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
}

.activity-card.active {
  opacity: 1;
  transform: translateX(0);
}

.activity-card:not(.active) {
  pointer-events: none;
}

.carousel-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0a4472;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  margin: 0 10px;
  z-index: 2;
}

.carousel-button:hover:not(:disabled) {
  background: #0d5a8c;
  transform: scale(1.1);
}

.carousel-button:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

.carousel-button i {
  font-size: 20px;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dcdfe6;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #0a4472;
  transform: scale(1.2);
}

.indicator:hover {
  background: #0a4472;
}

.activity-title {
  font-size: 18px;
  color: #303133;
  margin-bottom: 12px;
  font-weight: 600;
}

.activity-description {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  flex: 1;
}

.activity-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: #f5f7fa;
  padding: 12px;
  border-radius: 8px;
  margin-top: auto;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 13px;
}

.detail-item i {
  color: #0a4472;
  font-size: 16px;
}

/* 社团卡片网格样式 */
.clubs-grid {
  flex: 1;
  padding: 32px 120px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  min-height: 0; /* 允许内容滚动 */
}

@media (max-width: 1200px) {
  .clubs-grid {
    padding: 32px 60px;
  }
}

@media (max-width: 768px) {
  .clubs-grid {
    padding: 32px 20px;
  }
}

.club-card {
  background: #2d4f42;
  border-radius: 16px;
  overflow: visible;
  height: 280px;
  display: flex;
  flex-direction: column;
  color: white;
  transition: transform 0.3s ease;
  position: relative;
}

.club-card::before {
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  transform-origin: 50% 0;
  transition: transform 0.3s ease;
}

.club-card:hover::before {
  animation: swingEffect 3s ease-in-out infinite;
}

@keyframes swingEffect {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(8deg);
  }
  75% {
    transform: rotate(-8deg);
  }
}

.club-card:nth-child(6n+1)::before {
  background-image: url('../assets/img/img_case1Human.png');
  top: -20px;
  right: -20px;
}

.club-card:nth-child(6n+2)::before {
  background-image: url('../assets/img/img_case2Human.png');
  bottom: -20px;
  left: -20px;
}

.club-card:nth-child(6n+3)::before {
  background-image: url('../assets/img/obj_bard-recommend.png');
  bottom: -20px;
  right: -20px;
}

.club-card:nth-child(6n+4)::before {
  background-image: url('../assets/img/obj_flower-recommend.png');
  top: -20px;
  left: -20px;
}

.club-card:nth-child(6n+5)::before {
  background-image: url('../assets/img/img_case1Human.png');
  bottom: -20px;
  left: -20px;
}

.club-card:nth-child(6n+6)::before {
  background-image: url('../assets/images/case2Human.png');
  top: -20px;
  left: -20px;
}

.club-card:hover {
  transform: translateY(-5px);
}

.club-card:hover .club-card-line svg path {
  animation: redrawLine 1.5s ease-in-out;
}

.club-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

.club-card-header {
  margin-bottom: 20px;
}

.club-card-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  margin-bottom: 2px;
}

.club-card-line {
  display: block;
  margin: 4px 0 12px;
  width: 91px;
  height: 20px;
}

.club-card-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.club-card-line svg path {
  stroke: #e85c33;
  stroke-dasharray: 300;
  stroke-dashoffset: 0;
}

@keyframes redrawLine {
  0% {
    stroke-dashoffset: 300;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.club-card-tags {
  margin-top: 8px;
}

.tag {
  display: inline-block;
  background: #e85c33;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
}

.club-card-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-card-actions {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.club-card-actions .custom-button {
  color: white !important;
  min-width: 100px !important;
  flex: 0 0 auto !important;
}

.club-card-actions .custom-button::after {
  background-color: rgba(255, 255, 255, 1) !important;
  opacity: 1 !important;
}

.club-card-actions .custom-button:first-child {
  color: #ffffff!important;
}

.club-card-actions .custom-button:first-child::after {
  background-color: #3d6859 !important;
  opacity: 1 !important;
}

.club-card-actions .custom-button:last-child {
  color: white !important;
}

.club-card-actions .custom-button:last-child::after {
  background-color: #e85c33 !important;
  opacity: 1 !important;
}

.club-card-actions .custom-button i {
  font-size: 16px !important;
  transition: transform 0.3s ease !important;
}

.club-card-actions .custom-button:hover i {
  transform: translateX(3px) !important;
}

.club-card-actions .custom-button:active {
  transform: translateY(0) !important;
  transition: transform 0.1s !important;
}

.club-card-actions .custom-button:hover::after {
  opacity: 1 !important;
}

.club-card-actions .custom-button:active::after {
  opacity: 0.9 !important;
}

.label {
  color: #909399;
  font-size: 13px;
  margin-right: 4px;
}

.club-card-info {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-row .label {
  font-size: 12px;
  color: #909399;
}

.info-row .value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #606266;
  font-size: 13px;
}

.info-row i {
  color: #409EFF;
  font-size: 14px;
}

.club-card-actions .custom-button {
  flex: 1;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
}

.club-card-actions .custom-button i {
  font-size: 14px;
}

/* 修改分页器样式以适应新的布局 */
.pagination-container {
  padding: 16px 24px;
  background: transparent;
  border-top: 1px solid #ebeef5;
}

.explore-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  min-height: calc(100vh - 200px); /* 确保最小高度足够 */
}

.search-header {
  padding: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.search-wrapper {
  width: 500px;
  max-width: 90%;
  position: relative;
}

.search-input :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.95);
  border: 2px solid #2d4f42;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  padding: 8px 20px;
  transition: all 0.3s ease;
}

.search-input :deep(.el-input__wrapper:hover) {
  background-color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  border-color: #e85c33;
}

.search-input :deep(.el-input__wrapper.is-focus) {
  background-color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(232, 92, 51, 0.2);
  border-color: #e85c33;
}

.search-input :deep(.el-input__inner) {
  color: #2d4f42;
  height: 40px;
  font-size: 16px;
  font-weight: 500;
  padding-left: 10px;
}

.search-input :deep(.el-input__inner::placeholder) {
  color: #8aa89f;
  font-weight: normal;
}

.search-icon {
  color: #2d4f42;
  font-size: 20px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.search-input:hover .search-icon,
.search-input :deep(.el-input__wrapper.is-focus) + .search-icon {
  opacity: 1;
  color: #e85c33;
}

.clubs-grid {
  flex: 1;
  padding: 32px 120px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
  min-height: 0; /* 允许内容滚动 */
}

@media (max-width: 1200px) {
  .clubs-grid {
    padding: 32px 60px;
  }
}

@media (max-width: 768px) {
  .clubs-grid {
    padding: 32px 20px;
  }
}



.nav-content {
  max-width: 800px;
  margin: 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 3px solid #1B365D;
  border-radius: 60px;
  padding: 4px 12px;
}

.nav-items {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-item {
  font-family: ShangShouBoHan, serif;
  font-size: 24px;
  font-weight: 700;
  color: #1B365D;
  cursor: pointer;
  padding: 6px 24px;
  border-radius: 60px;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.nav-item:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  color: #EA5A26;
  font-size: 20px;
  z-index: 1;
  font-weight: normal;
  font-family: Arial, sans-serif;
}

.nav-item:hover {
  color: #EA5A26;
}

.nav-item.active {
  color: #EA5A26;
  font-weight: 800;
}

/* 删除跳动动画相关的代码 */
.nav-item.active:hover {
  color: #EA5A26;
}

/* 删除bounce动画关键帧 */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.nav-dot {
  display: none;
}

/* 修改主容器样式以适应新的顶部导航 */
.main-full {
  padding-top: 80px !important;
  margin-left: 0 !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .nav-items {
    gap: 12px;
  }

  .nav-item {
    font-size: 16px;
    padding: 10px 20px;
  }

  .nav-item:not(:last-child)::after {
    right: -2px;
    font-size: 16px;
  }
}

/* 用户下拉菜单样式 */
.user-dropdown {
  position: fixed;
  top: 16px;
  right: 40px;
  z-index: 1001;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 6px 16px;
  background: #08385e;
  border: 2px solid #08385e;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  height: 60px;
  box-sizing: border-box;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e85c33;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar .el-icon {
  font-size: 20px;
}

.username {
  color: white;
  font-size: 16px;
  font-weight: 500;
}

.el-icon-arrow-down {
  color: white;
  transition: transform 0.3s ease;
}

.el-icon-arrow-down.rotate {
  transform: rotate(180deg);
}

.decoration-image {
  position: absolute;
  top: -10px;
  right: -36px;
  width: 70px;
  height: 70px;
  background-image: url('../assets/img/img_case1Human.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.user-info:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  border-color: #e85c33;
  background: #0a4472;
}

.user-info:hover ~ .decoration-image {
  animation-duration: 3s;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: #08385e;
  border: 2px solid #08385e;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  min-width: 160px;
  overflow: hidden;
  animation: dropdownFadeIn 0.3s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.dropdown-item .el-icon {
  font-size: 16px;
}

.dropdown-item:hover {
  background: #0a4472;
  color: #e85c33;
}

.dropdown-item:hover .el-icon {
  color: #e85c33;
}

@media (max-width: 768px) {
  .user-dropdown {
    top: 10px;
    right: 10px;
  }
  
  .user-info {
    padding: 6px 12px;
  }
  
  .username {
    font-size: 14px;
  }
  
  .dropdown-menu {
    min-width: 140px;
  }
  
  .dropdown-item {
    padding: 10px 12px;
  }
}

.explore-title {
  text-align: center;
  margin: 40px 0 0 0;
  padding: 0 20px;
}

.cn-title {
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
  font-size: 48px;
  color: #1B365D;
  margin: 0;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  display: inline-block;
}

.cn-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #EA5A26, #1B365D);
  border-radius: 2px;
}

.en-title {
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
  font-size: 16px;
  color: #666;
  margin: 20px 0 0;
  font-weight: 500;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .cn-title {
    font-size: 36px;
  }
  
  .en-title {
    font-size: 18px;
  }
}

.participation-container {
  height: 80vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: visible;
  background: #ffffff;
  border: 3px solid #0a4472;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: relative;
  /* padding: 20px; */
}

.participation-container::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  background-image: url('../assets/img/img_case1Human.png');
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -30px;
  right: -100px;
  z-index: 6;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

.participation-container::after {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: url('../assets/img/参考/obj_cloud4.png');
  background-size: contain;
  background-repeat: no-repeat;
  left: -130px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.participation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 16px 24px;
  height: 60px;
  /* background: #ffffff; */
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.participation-header span {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 12px;
  line-height: 1;
}

.participation-header span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #0a4472;
  border-radius: 2px;
}

/* 清除内部元素的背景 */
.participation-container :deep(.el-tabs__header) {
  background: transparent;
  border-bottom: 1px solid #ebeef5;
  margin: 0;
}

.participation-container :deep(.el-tabs__nav-wrap) {
  background: transparent;
}

.participation-container :deep(.el-tabs__item) {
  color: #606266;
  background: transparent;
}

.participation-container :deep(.el-tabs__item.is-active) {
  color: #0a4472;
}

.participation-container :deep(.el-tabs__active-bar) {
  background-color: #0a4472;
}

.participation-container :deep(.el-table) {
  background: transparent;
}

.participation-container :deep(.el-table th) {
  background: #f5f7fa;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
}

.participation-container :deep(.el-table tr) {
  background: transparent;
  color: #303133;
}

.participation-container :deep(.el-table td) {
  background: transparent;
  border-bottom: 1px solid #ebeef5;
}

.participation-container :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background: #f5f7fa;
}

.participation-container :deep(.el-radio-button__inner) {
  background: transparent;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.participation-container :deep(.el-radio-button__inner:hover) {
  color: #0a4472;
}

.participation-container :deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  background: #0a4472;
  border-color: #0a4472;
  box-shadow: none;
}

.participation-container :deep(.el-tag) {
  background: transparent;
  border: 1px solid #dcdfe6;
}

.participation-container :deep(.el-button--primary.is-link) {
  color: #0a4472;
}

.participation-container :deep(.el-button--primary.is-link:hover) {
  color: #0a4472;
}

.participation-container :deep(.custom-button) {
  background: #ffffff;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.participation-container :deep(.custom-button:hover) {
  background: #f5f7fa;
  border-color: #0a4472;
  color: #0a4472;
}

.participation-container :deep(.custom-button.cancel-button) {
  color: #dc0000 !important;
}

.disabled-button {
     color: #00792e !important;
     cursor: not-allowed !important;
}

.abled-button {
  color: #e85c33 !important;
}


@media (max-width: 768px) {
  .main-content {
    width: 95%;
    padding: 0 10px;
  }
}

/* 统一对话框样式 */
.custom-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.custom-dialog {
  background: #ffffff;
  border-radius: 16px;
  width: 800px;
  max-width: 90vw;
  max-height: 80vh;
  min-height: 400px; /* 添加最小高度 */
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  animation: dialogFadeIn 0.3s ease;
  border: 2px solid #0a4472;
}

.custom-dialog-header {
  padding: 20px 24px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-radius: 16px 16px 0 0;
}

.custom-dialog-header h3 {
  margin: 0;
  font-size: 20px;
  color: #303133;
  font-weight: 600;
  font-family: 'REEJI-HaoHengGB-Heavy', sans-serif;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #909399;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #303133;
}

.custom-dialog-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px; /* 添加最小高度 */
  display: flex;
  flex-direction: column;
}

/* 成员管理标签页样式 */
.member-tabs {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 300px;
}

.tab-buttons {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 12px;
}

.tab-button {
  padding: 8px 16px;
  border: none;
  background: none;
  color: #606266;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
}

.tab-button:hover {
  color: #0a4472;
  background: rgba(10, 68, 114, 0.1);
}

.tab-button.active {
  color: #0a4472;
  font-weight: 600;
  background: rgba(10, 68, 114, 0.1);
}

/* 自定义表格样式 */
.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.custom-table th,
.custom-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
  color: black;
  text-align: center;
}

.custom-table th {
  background: #f5f7fa;
  color: #303133;
  font-weight: 600;
}

.custom-table tr:hover {
  background: #f5f7fa;
}

/* 成员标签样式 */
.member-tag {
  display: inline-block;
  padding: 2px 6px;
  background: #0a4472;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

.role-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #f5f7fa;
  color: #606266;
  border-radius: 4px;
  font-size: 12px;
}

.role-tag.president {
  background: #0a4472;
  color: white;
}

/* 成员信息部分样式 */
.member-info-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 200px;
  justify-content: center;
  padding: 20px;
}

.info-row {
  display: flex;
  gap: 40px;
  justify-content: center;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  color: #606266;
  font-size: 16px;
  font-weight: 500;
}

.info-value {
  color: #303133;
  font-size: 18px;
  font-weight: 600;
}

.role-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #f5f7fa;
  color: #606266;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
}

.role-tag.president {
  background: #0a4472;
  color: white;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons .custom-button {
  padding: 4px 12px;
  font-size: 13px;
}

/* 动画效果 */
@keyframes dialogFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.member-list-container {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.activity-detail {
  flex: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 活动详情部分样式 */
.activity-detail-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 200px;
  justify-content: center;
  padding: 20px;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
}

.status-tag.info {
  background: #f4f4f5;
  color: #909399;
}

.status-tag.success {
  background: #f0f9eb;
  color: #67c23a;
}

.status-tag.warning {
  background: #fdf6ec;
  color: #e6a23c;
}

.status-tag.danger {
  background: #fef0f0;
  color: #f56c6c;
}

.activity-detail-dialog {
  width: 600px;
  max-width: 90vw;
}

.activity-detail-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 200px;
  padding: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.description-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.description-text {
  line-height: 1.6;
  color: #606266;
}

.info-label {
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.info-value {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.status-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}
</style>


